<template>
	<view class="">
		<view class="studentId" :style="{height: studentIdHeight+'px'}">
			<view class="nav">
				<view class="statusBar"  :style="{ 'height':statusBarHeight + 'px' }">	
				</view>
				<view class="naviBar"  :style="{ 'height':naviBarHeight + 'px' }">
					<view class="iconfont iconfanhui flex-1" @tap='goBack'></view>
					<view class="">
						学生证
					</view>
				</view>
			</view>
			<swiper class="swiper" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in getcard">
					<view class="swiper-item1">
						<view class="avatar">
							<image class="avatarImg" :src="item.userImage" mode=""></image>
						</view>
						<view class="label">
							<view>姓名：</view>
							<view>{{item.userName}}</view>
						</view>
						<view class="label">
							<view>班级：</view>
							<view>{{item.className}}</view>
						</view>
						<view class="label">
							<view>学号：</view>
							<view>{{item.studentNumber}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.studentIdHeight = res.windowHeight - uni.upx2px(0)
					//windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		data() {
			return {
				studentIdHeight: '',
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				getcard:'',
				statusBarHeight: 0 ,//状态栏高度
				naviBarHeight:0,//导航栏高度
			}
		},
		onLoad() {
			this.studentcard()
			const res = uni.getSystemInfoSync()
			const system = res.platform
			this.statusBarHeight = res.statusBarHeight
			console.log(this.statusBarHeight)
			if (system === 'android') {
			this.titleHeight = (48 + this.statusBarHeight)
			} else if (system === 'ios') {
			this.titleHeight = (44 + this.statusBarHeight)
			}
			this.naviBarHeight = this.titleHeight - this.statusBarHeight
			console.log(this.naviBarHeight)
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			studentcard(){
				this.$api.studentcard().then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.getcard = res.data.dataMap
					}
				})
			}
		}
	}
</script>

<style scoped>
	.flex-1{
		margin-left: 30rpx;
	}
	.label{
		width: 400rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.08);
		box-shadow: 7rpx 7rpx 20rpx 0rpx rgba(0, 0, 0, 0.04), 7rpx 7rpx 20rpx 0rpx rgba(255, 255, 255, 0.1);
		border-radius: 12rpx;
	}
	.label>view:nth-child(1){
		width: 120rpx;
		font-weight: 500;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 30rpx;
	}
	.label>view:nth-child(2){
		width: 300rpx;
		height: 62rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.avatar {
		width: 218rpx;
		height: 302rpx;
		background: #F0F0F0;
		border: 2rpx solid #FFFFFF;
		border-radius: 8rpx;
		margin: 100rpx auto;
		border-radius: 20rpx;
	}
	.avatarImg{
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	.swiper-item1 {
		width: 690rpx;
		height: 978rpx;
		background: url(../../static/images/taecher/lastzheng@2x.png) no-repeat;
		background-size: contain; 
		overflow: hidden;
		border-radius: 20rpx;
		margin-left: 5rpx;
	}
	.swiper {
		width: 700rpx;
		height: 978rpx;
		margin: 0 auto;
		margin-top: 20%;
	}

	.studentId {
		width: 750rpx;
		background: url(../../static/images/taecher/lastbg@2x.png) no-repeat;
		background-size: cover;
		overflow: hidden;
	}
	.naviBar{
		display: flex;
	}
	.naviBar view:nth-child(1){
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 90rpx;
	}
	.naviBar view:nth-child(2){
		margin-right: 320rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 90rpx;
	}
</style>
